<template>
    <view class="header">
        <image class="img-title" src="../../../static/icon/back-btn.png" @click="router" mode="" />
        <view class="title">{{ $t('information.financial.financial') }}</view>
    </view>
    <view class="main">
        <!-- <u-swipe-action> -->
        <u-swipe-action :bg-color="bgColor" :options="options" :show="show" class="card-item bg1">
            <view class="first-line">
                <image class="card-icon" src="../../../static/icon/bank1.png" mode="" />
                <view class="card-info">
                    <view class="card-name">台湾银行</view>
                    <view class="card-type">储蓄卡</view>
                </view>
            </view>
            <view class="second-line">
                <view class="card-number">****************</view>
            </view>
        </u-swipe-action>
        <!-- </u-swipe-action> -->
        <!-- <u-swipe-action> -->
        <u-swipe-action :bg-color="bgColor" :options="options" :show="show" class="card-item bg2">
            <view class="first-line">
                <image class="card-icon" src="../../../static/icon/bank1.png" mode="" />
                <view class="card-info">
                    <view class="card-name">中国信托银行</view>
                    <view class="card-type">储蓄卡</view>
                </view>
            </view>
            <view class="second-line">
                <view class="card-number">****************</view>
            </view>
        </u-swipe-action>
        <!-- </u-swipe-action> -->
        <view class="add-card" @click="addCardRouter()">
            <image class="add-icon" src="../../../static/icon/add-card.png" mode="" />
            <view class="add-decription">{{ $t('information.financial.addCard') }}</view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
const bgColor = ref('rgba(0,0,0,0)')
const options = ref([
    {
        text: '删除',
        style: {
            backgroundColor: '#292A36',
            height: '220rpx',
            color: '#FF4242'
        }
    }
])
function addCardRouter() {
    uni.navigateTo({ url: '/pages/my-service/financial/add-card' })
}
function router() {
    uni.navigateBack({ delta: 1 });
}
</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-dark;
}

.header {
    width: 100%;
    height: 88rpx;
  // #ifndef H5
  margin-top: 88rpx;
  // #endif
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
        text-align: center;
        color: #fff;
        margin: 0 auto;
        padding-right: 104rpx;
        font-size: 32rpx;
    }

    .img-title {
        width: 58rpx;
        height: 58rpx;
        margin-left: 46rpx;
    }
}

.main {
    margin: 31rpx 40rpx 0rpx;

    .bg1 {
        background-image: linear-gradient(90deg, #48B4B8, #457796);
    }

    .bg2 {
        background-image: linear-gradient(90deg, #D67065, #DC6B5E);
    }

    .card-item {
        margin-bottom: 40rpx;
        border-radius: 28rpx;
        height: 220rpx;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;

        .first-line {
            display: flex;
            align-items: center;
            padding: 30rpx 45rpx 0rpx 42rpx;

            .card-icon {
                width: 56rpx;
                height: 56rpx;
                margin-right: 17rpx;
            }

            .card-info {
                .card-name {
                    color: #fff;
                    font-size: 28rpx;
                    height: 41rpx;
                }

                .card-type {
                    color: #fff;
                    font-size: 20rpx;
                    height: 28rpx;
                    opacity: 0.5;
                }
            }
        }

        .second-line {
            position: absolute;
            bottom: 10rpx;
            width: 670rpx;
            height: 45rpx;
            line-height: 45rpx;
            text-align: right;
            padding-right: 45rpx;
            color: #fff;

            .card-number {
                letter-spacing: 6rpx;
            }
        }
    }

    .add-card {
        background-color: #292A36;
        height: 113rpx;
        border-radius: 28rpx;
        display: flex;
        align-items: center;

        .add-icon {
            width: 52rpx;
            height: 52rpx;
            margin-left: 40rpx;
            margin-right: 49rpx;
        }

        .add-decription {
            color: #fff;
            font-size: 28rpx;
        }
    }

}
</style>